<template>
    <el-row :gutter="16">
        <el-col :span="24" style="margin-bottom: 16px;">
            <BaseCard>
                <VueEcharts style="height: 370px;" :option="option"></VueEcharts>
            </BaseCard>
        </el-col>
        <!-- lg表示浏览器宽度 >1200 -->
        <el-col :lg="12" :md="24" class="md-margin">
            <BaseCard>
                <VueEcharts style="height: 370px;" :option="option"></VueEcharts>
            </BaseCard>
        </el-col>
        <el-col :lg="12" :md="24">
            <BaseCard>
                <VueEcharts style="height: 370px;" :option="option"></VueEcharts>
            </BaseCard>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { getHomeUsersApi } from '@/api/home';
import { computed, onMounted, reactive } from 'vue';

const usersData = reactive({
    count: [],
    date: []
})

const option = computed(() => {
    return {
        grid: {
            left: '2%',
            right: '2%',
            top: 40,
            bottom: 40
        },
        xAxis: {
            type: 'category',
            data: usersData.date,
            axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                showSymbol: false,  // 去掉折线图的小圆点
                data: usersData.count,
                type: 'line',
                smooth: true, // 平滑曲线图
                areaStyle: {} // 折线图下方的背景颜色
            }
        ]
    }
})

onMounted(() => {
    getHomeUsers();
})

const getHomeUsers = () => {
    getHomeUsersApi()
        .then(res => {
            if (res.code == 200) {
                usersData.count = res.data.count;
                usersData.date = res.data.date;
            }
        })
}

</script>

<style scoped>
/* 媒体查询 */
/* max-width：1200px 表示【最大宽度1200px】 */
/* 只有当浏览器宽度小于1200px时，内部的CSS才会生效 */
@media (max-width: 1200px) {
    .md-margin {
        margin-bottom: 16px;
    }
}
</style>